<template>
  <header>
    <SearchGoods />
  </header>
  <main>
    <Titles title="学习资源专区" more="kecheng" />
    <ul>
      <li v-for="item in goods_list" :key="item.id">
        <Goods :goods="item" />
      </li>
    </ul>
    <Titles class="title2" title="学习视频专区" more="video" />
    <ul>
      <li v-for="item in goods_list" :key="item.id">
        <Goods :goods="item" type="video" />
      </li>
    </ul>
  </main>
  <FooterNav />
</template>
<script setup lang="ts">
import SearchGoods from '@/components/SearchGoods.vue';
import Titles from '@/components/Title.vue';
import Goods from '@/components/Goods.vue';
import FooterNav from '@/components/Footer.vue';
import { reactive } from 'vue';

const goods_list = reactive([{
  id: "1",
  img: "https://www.ieduchina.com/uploadfile/202403/f24220240301084205.jpg",
  title: "弘科未来x英国阿丁莱丨夏日英伦梦，开启世界名校之旅",
  price: "128",
  old_price: "28",
}, {
  id: "2",
  img: "https://www.ieduchina.com/uploadfile/202403/f88920240301084506.jpg",
  title: "登顶剑桥，美本前三十，加澳港TOP1，全面爆发！",
  price: "128",
  old_price: "28",
}, {
  id: "3",
  img: "https://www.ieduchina.com/uploadfile/202403/f50820240301083057.jpg",
  title: "3月23日！深圳梅沙双语学校校园开放日+未来菁英训练营报名中",
  price: "128",
  old_price: "28",
}]);
</script>
<style lang="less" scoped>
main {
  padding-bottom: 200rem;
}

ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 26rem 30rem;

  li {
    &:nth-of-type(n+3) {
      margin-top: 30rem;
    }
  }
}
</style>